﻿/******************************************************************************
* File description: CustomComboBox.qml
* Function: 自定义下拉菜单
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-07
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

Item {
    id: root
    /* property 定义开始 */
    // 下拉框

    property string comboBgColor: "#FFF"
    property string comboBorderColor: "#CCCCCC"
    property int comboBorderWidth: 1
    property int comboRadius: 4
    property int comboLeftPadding: 13
    property var model: []
    property int listItemHeight: 40*dp // 单个Item高度
    property int showListMaxCountinPage: 4 // 一个页面要展示的最大Item数
    property bool dynamicListHeight: true // 动态下拉框高度(默认开启)
    property int comboCurrentIndex: 0 // 下拉框当前下标 -1未选择

    // indicator
    property int indicatorPadding: 8

    // popup
    property int popupHeight: getItemListHeight()
    property string popupBgColor: "#FFFFFF"
    property string popupBorderColor: "transparent"
    property int popupBorderWidth: 0
    property int popupRadius: 4
    property int popupSignalItemHeight: 40*dp
    property int popupTopMargin: 2

    // 文字
    property string comboFontColor: "#222"
    property string comboFontFamily: "Alibaba PuHuiTi 3.0"
    property int comboFontPixelSize: font.pixelsieze
    property int comboFontHorAlign: Text.AlignLeft
    property string comboDefaultText: "" // 当index为-1时，combobox上显示的默认文字
    property string popUpFontColor: "#222"

    // highlight
    property string highlightColor: "#D4D9FF"
    property string highlightedFontColor: "#2F42CD"

    // 信号
    signal currentIndex(int index) // 当前下标
    signal currentText(string text) // 当前文本
    signal currentValue(var value) // 当前值

    // 改 - JNN
    property int editWidth: 180*dp
    property int titleWidth: title === "" ? 0 : 80*dp
    property string title: ""
    property bool required: false
    property bool editable: true
    property bool textEditable: false    // 是否可更改默认的ComboModel
    property string customText: ""

    property bool mutex: false

    function setText(changedText){    // 凑合凑合过吧
        for(let i = 0; i < model.length; i ++){
            if(model[i] === changedText){
                setIndex(i)
                return
            }
        }
        setIndex(-2)
        customText = changedText
    }


    // 函数
    /*
     * 返回下拉框高度
     * @return 下拉框高度
     */
    function getItemListHeight(){
        // 动态下拉框高度
        if(dynamicListHeight){
            // 如果model数量小于showListMaxCountinPage设定值，则显示model数量高度
            // 否则显示showListMaxCountinPage设定值
            return model.length < showListMaxCountinPage ?
                        listItemHeight * model.length :
                        listItemHeight * showListMaxCountinPage
        }else {
            // 静态高度：直接返回showListMaxCountinPage设定值
            return listItemHeight * showListMaxCountinPage
        }
    }

    /*
     * 修改当前comboBox下标
     */
    function setIndex (changedIndex) {
        mutex = true
        control.currentIndex = changedIndex
        mutex = false
    }
    function getText(){     //
//        if(control.currentIndex === -1){
//            return ""
//        }
        return textInput.text
    }
    function getIndex(){
        return control.currentIndex
    }

    /* property 定义结束 */
    height: 40*dp
    width: titleWidth + editWidth

    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: config.fontsize
            x: 0
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    ComboBox {
        id: control
        height: parent.height
        width: parent.width
        x: 0*dp
        model: root.model
        font.family: comboFontFamily
        font.pixelSize: config.fontsize
        displayText: currentIndex === -2 ? customText : (currentIndex === -1 ? comboDefaultText : currentText)
        // displayText: comboDefaultText
        padding: 0


        // 下拉框中每一个选项的代理样式
        delegate: ItemDelegate {
            width: control.width
            height: popupSignalItemHeight
            leftPadding: comboLeftPadding
            background: Rectangle {
                color: control.highlightedIndex === index ? highlightColor : comboBgColor
            }

            // 每个代理选项样式
            contentItem: Text {
                text: modelData
                color: control.highlightedIndex === index ? highlightedFontColor : popUpFontColor
//                font: control.font
                font.pixelSize: config.fontsize
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }

            highlighted: control.highlightedIndex === index
        }

        // 显示框文本样式
        contentItem: TextInput {
            id: textInput
//            font: control.font
            font.pixelSize: config.fontsize
            color: comboFontColor
            text: control.displayText
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: comboFontHorAlign
            leftPadding: comboLeftPadding
            rightPadding: indicatorPadding
            clip: true
            onTextChanged: {
                if(mutex) return
                root.currentText(text)
            }
        }

        // 显示框背景样式
        background: Rectangle {
            anchors.fill: parent
            color: comboBgColor
            border.width: comboBorderWidth
            border.color: comboBorderColor
            radius: popupRadius
        }

        // 向下三角箭头
        indicator: Rectangle {
            id: indicatorArw
            width: 25*dp
            height: 20*dp
            x: control.width - width - indicatorPadding
            y: (control.availableHeight - height) / 2
            color: "transparent"

            Image {
                anchors.fill: parent
                source: "qrc:/picture/xx_jt.png"
            }
        }

        // 下拉框（Popup）
        popup: Popup {
            id: popup
            width: control.width
            height: popupHeight
            y: control.height + popupTopMargin
            margins: 0
            padding: 0
            // popup的内容
            contentItem: ListView {
                id: listview
                clip: true
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex

                // 垂直滚动条
                ScrollBar.vertical: CustomVerScrollBar {
                    id: vScrollBar
                    visible: control.delegateModel &&
                             (control.delegateModel.count > showListMaxCountinPage)
                }
            }

            // popup的背景
            background: Rectangle {
                border.color: popupBorderColor
                border.width: popupBorderWidth
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }

            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popupHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popupHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }

        // 事件
        onCurrentIndexChanged: {
            if(mutex) return
            root.currentIndex(control.currentIndex)
        }
        onCurrentTextChanged: {
            if(mutex) return
            root.currentText(control.currentText)
        }
        onCurrentValueChanged: {
            if(mutex) return
            root.currentValue(control.currentValue)
        }


    }

    Rectangle{
        anchors.fill: control
        color: "#EEEEEE"
        opacity: 0.6
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
        visible: !editable
    }

    Item{
        height: control.height; width: editWidth - 30*dp
        x: titleWidth
        visible: !textEditable
        MouseArea{      // 文本区域的框框
            anchors.fill: parent
            onReleased: {
                if(control.popup.visible){
                    control.popup.close()
                }else{
                    control.popup.open()
                }
                control.focus = true
            }
        }
    }
    Item{
        height: control.height; width: 40*dp
        x: root.width - 40*dp
        MouseArea{     // 下拉箭头的框框
            anchors.fill: parent
            onReleased: {
                if(control.popup.visible){
                    control.popup.close()
                }else{
                    control.popup.open()
                }
                control.focus = true
            }
        }
    }



    Item{
        height: parent.height
        width: 10*dp
        Text{
            text: "*"
            x: -10*dp
            color: "red"
            font.pixelSize: config.fontsize
            anchors.verticalCenter: parent.verticalCenter
        }
        visible: required
    }
}
